import AceEditor from 'react-ace';
import "ace-builds/src-noconflict/mode-xml";
import "ace-builds/src-noconflict/theme-github";
import './style.less';

interface sourceCodeProps {
  bpmnXML: string;
}

export default function SourceCode(props: sourceCodeProps) {
  const { bpmnXML } = props;

  return (
    <div className="bpmn-source-code">
      {
        bpmnXML
        &&
        <AceEditor
          mode="xml"
          theme="github"
          name="bpmn_code_editor"
          fontSize={14}
          height="100%"
          width="100%"
          readOnly={true}
          value={bpmnXML}
          wrapEnabled={true}
          showPrintMargin={false}
          setOptions={{
            showLineNumbers: true,
            // tabSize: 2,
            wrap: true,
            wrapBehavioursEnabled: true,
          }}
        />
      }
    </div>
  );
}
